<template>
  <div class="metaSimpleTree">
    <div class="metaSimpleTree_title" :style="titleSize && titleSize !== '' ? 'font-size:' + titleSize + 'px' : ''">{{title}}
      <el-button v-if="otherBtn !== ''" size="mini" class="metaSimpleTree_titleBtn" @click="otherBtnClick">{{otherBtn}}</el-button>
    </div>
    <div class="metaSimpleTree_tree">
      <el-tree ref="metaSimTree" lazy :data="treeData" :load="loadNode" :props="defaultProps" @node-click="handleNodeClick" highlight-current :expand-on-click-node="false" :node-key="defaultProps.key" :render-after-expand="false"></el-tree>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'MetaSimpleTree',
    mixins: [],
    props: {
      title: {
        type: String,
        default: ''
      },
      titleSize: {
        type: String,
        default: ''
      },
      otherBtn: {
        type: String,
        default: ''
      },
      defaultProps: {
        type: Object,
        default: () => {
          return {
            children: 'children',
            label: 'label',
            key: 'id',
            isLeaf: 'leaf'
          }
        }
      },
      treeData: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    data() {
      return {

      }
    },
    created() {
    },
    mounted() {
    },
    methods: {
      handleNodeClick(item) {
        this.$emit("treeItemChoose", item)
      },
      otherBtnClick() {
        this.$emit("otherBtnClick")
      },
      loadNode(node, resolve) {
        if(node.level === 1) {
          resolve(node.data.children)
        }
        if(node.level === 2) {
          this.$fetch({
            url: process.env.PROGOO_GATE_WATER + "api/admin/file/" + node.data.fid,
            method: "get",
            params: {}
          }).then(res => {
            if (res.data.code === 200) {
              let levelData = []
              for(let i in res.data.result) {
                let item = {}
                item = res.data.result[i]
                item.name = res.data.result[i].point
                item.leaf = true
                item.treeLevel = '2'
                item.pid = node.data.pid
                item.imgUrl = node.data.imgUrl
                levelData.push(item)
              }
              resolve(levelData)
            }else {
              this.$notify.error({
                title: '错误',
                message: res.data.message
              });
            }
          })
        }
      }
    }
  }

</script>
<style lang='less'>
  .metaSimpleTree{
    box-sizing: border-box;
    min-width: 184px;
    margin: 0 8px;
    padding: 15px;
    border: 1px solid #e4eaec;
    border-radius: 6px;
    float: left;
    height: 100%;
    display: flex;
    flex-direction: column;
    .metaSimpleTree_title{
      width: 100%;
      padding-bottom: 10px;
      margin-bottom: 10px;
      font-size: 18px;
      border-bottom: 1px solid rgb(228, 234, 236);
      .metaSimpleTree_titleBtn{
        margin-left: 6px;
        padding: 7px 10px;
        float: right;
      }
    }
    .metaSimpleTree_tree{
      width: 100%;
      height: 100%;
      overflow: scroll;
    }
    .metaSimpleTree_tree::-webkit-scrollbar {
      display: none;
    }
  }
</style>
